﻿<!DOCTYPE html>
<html lang="en">

	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
		<meta name="description" content="">
		<meta name="author" content="">
		<!-- STYLESHEETS -->
		<!--[if lt IE 9]><script src="../../js/flot/excanvas.min.js"></script><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
		<link rel="stylesheet" type="text/css" href="../../css/cloud-admin.css">
		<link rel="stylesheet" type="text/css" href="../../css/themes/default.css" id="skin-switcher">
		<link rel="stylesheet" type="text/css" href="../../css/responsive.css">
		<link href="../../font-awesome/css/font-awesome.min.css" rel="stylesheet">
	    <!-- file-input -->
	    <link rel="stylesheet" type="text/css" href="../../js/file-input/fileinput.css" />
		<!-- SELECT2 -->
	<link rel="stylesheet" type="text/css" href="../../js/select2/select2.min.css" />
		<!-- datatable -->
		<link rel="stylesheet" href="../../js/datatables/datatable.css">
		 <link rel="stylesheet" href="../../js/datepicker/datepicker.css">
		   <style type="text/css">
		   
		   .in_A .swiper-container{width:100%;height:auto;}
.in_B{padding:1.125rem;overflow: hidden;}
.in_B li{width:25%;display:block;float:left;}

.in_C{height:auto;width:100%; overflow:hidden;}
.in_C dt{/*width:7.075rem;*/width:37.733%; position: relative;float: left;}
.in_C dt .seckill{position:absolute;top:0.5rem;left:0.5rem;}
.in_C dt .seckill .time{font-size:0.75rem;color:#333;padding-left:0.2rem;}
.in_C dt .seckill .seck{font-size:0.55rem;}
.in_C dt .seckill .seck span{color:#808080;padding-left:0.2rem;}
.in_C dt .seckill .seck .sec{width:3.5rem;height:0.875rem;background:#fff;border-radius:0.75rem;border:#7a6a56 solid 2px;font-size:0.65rem; text-align: center; line-height:0.875rem;color:#7a6a56;margin-top:0.1rem;}

.in_C dd{/*width:11.675rem;*/width:62.266%;float: left;}
.in_C dd p{overflow: hidden;}
.in_C dd p:first-child{width:100%;}

.in_C dd p span{float: left;}
.in_C dd p:last-child span:first-child{width:49.892%;}
.in_C dd p:last-child span:last-child{width:50.107%;}

.in_D{padding-bottom:1.5rem;}
.in_D .in_D_tit{height:2.25rem;line-height:2.25rem;font-size: 0.75rem; text-align: center;display: block;color:#333;}
.in_D .in_D_lst{width:100%;border-top:#eee solid 0.05rem;overflow: hidden;}
.in_D .in_D_lst li{border-bottom:#eee solid 0.05rem;width:33%;float:left;}
.in_D .in_D_lst li a{display:block;width:100%;border-left:#eee solid 0.05rem;}
.in_D .in_D_lst li:first-child a{border-left:#fff solid 0.05rem;}
.in_D .in_D_lst li:nth-child(5) a{border-left:#fff solid 0.05rem;}

.group-goods{}
.group-goods-banner{height:8.75rem;}
.group-goods-lst{overflow: hidden;padding:10px;}
.group-goods-lst li{width:142px;padding:10px 10px 10px 10px;float: left;} 
.group-goods-lst li h3{font-size:0.6rem;color:#808080;position:relative;padding-top:0.5rem;}
.group-goods-lst li h3 b{color:#333;font-size:0.7rem;padding-left:0.15rem;}
.group-goods-lst li h3 span{width:1.425rem;height:0.575rem;display:block;position:absolute;right: 0; top:0.7rem;} 
img{width:100%}
		   </style>
	
	</head>

<body>
	<header class="navbar clearfix" id="header">
		</header>

		<!-- PAGE -->
		<section id="page">
			<!-- SIDEBAR -->
			<div id="sidebar" class="sidebar">
				<div class="sidebar-menu nav-collapse">
	
					<ul>
						

					</ul>
					
				</div>

			</div>
			<!-- /SIDEBAR -->
			<div id="main-content">
<!-- SAMPLE BOX CONFIGURATION MODAL FORM-->
				<div class="modal fade" id="box-config" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog">
					<form id="form_focus">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
								<h4 class="modal-title">维护图片</h4>
							</div>
							<div class="modal-body">
								<div class="form-group  mrg-bt10">
									<label class="control-label col-md-3" style="line-height:34px;">位置：</label>
									<div class="col-md-6 imgName">
										
									</div>
								</div>
									<div class="form-group  mrg-bt10">
									<label class="control-label col-md-3" style="line-height:34px;">图片大小：</label>
									<div class="col-md-6 imgSize">
										
									</div>
								</div>
								<div class="form-group  mrg-bt10" style="height: 100px">
									<label class="control-label col-md-3" style="line-height:34px;"><span class="required">*</span>图片：</label>
									<form>
									<div class="col-md-8">									
                                      	<div hidden-image></div>
								          	<div class="fileinput fileinput-new" data-provides="fileinput" >
									          	<div class="image_preview_list" style="float:left;" id="imgs">
									          		<div class="fileinput-preview thumbnail image_preview_default" data-trigger="fileinput" style="width: 120px; height: 90px;"></div>	          		                           	
												</div>
												<div style="float:left; margin-left:5px; padding-top:23px;" class="addnewimg" id="f_span">
													<span class="btn btn-default btn-file" id="fir">
														<span class="fileinput-new" id="two" >上传图片</span>		
														<span class="fileinput-exists">Change</span>												
															<input type="file" name="uploadFile" upload-file="imageUrlProduct">
													</span>
													<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" style=" margin-bottom: 0px;margin-top:10px;">
													<div class="progress-bar progress-bar-success" style="width:0%;"></div>
												    </div>	
												</div>
												
											</div>
																		 								
																	
									</div>
								</form>	
						
							 </div>
							 <div class="form-group  mrg-bt10">
									<label class="control-label col-md-3" style="line-height:34px;"><span class="required">*</span>链接：</label>
									<div class="col-md-6">
										<textarea  class="form-control" row=3 cols=15 name="linkUrl" placeholder="请输入链接Url" style="resize:none" maxlength="200"></textarea>
										
									</div>
								</div>
								
						     
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
								<button type="button" class="btn btn-primary bt-save">保存</button>
							</div>
						</div>
						</form>
						
					</div>
				</div>
				<!-- /SAMPLE BOX CONFIGURATION MODAL FORM-->
				<div class="container">
					<div class="row">
						<div id="content" class="col-lg-12">
							
			               <div class="row">
								<div class="col-sm-12">
									<div class="page-header">
										<!-- STYLER -->

										<!-- /STYLER -->
										<!-- BREADCRUMBS -->
										<ul class="breadcrumb">
											<li>
												<i class="fa fa-home"></i>
												<a href="index.html">首页</a>
											</li>
											<li>
												<a href="#">商品管理</a>
											</li>
											<li>维护商品</li>
										</ul>
										<!-- /BREADCRUMBS -->

									</div>
								</div>
							</div>
					
					<div class="row" style="margin-left:20px">
						<label>此页面是维护M站的分类页面商品，点击图片即可更换图片及链接</label> 		
					</div>
					
					<div style="margin-left:20px">
					
			 		  <div class="row " name="tagA" style="width:414px">				 	
 					 		
							<div class="in_D">
					          <nav class="in_D_tit" style="font-size: 14px">热卖单品</nav>
					          <ul class="in_D_lst" style="list-style-type:none;padding-left: 0px">
					            <li><img name="A1" size="220*315" src="http://m.yiigoo.com/images/useless/shouye/in_D1.jpg?v=1" hegiht="157px" width="100%"></li>
					            <li><img name="A2" size="220*315" src="http://m.yiigoo.com/images/useless/shouye/in_D2.jpg" hegiht="157px" width="100%"></li>
					            <li><img name="A3" size="220*315" src="http://m.yiigoo.com/images/useless/shouye/in_D3.jpg" hegiht="157px" width="100%"></li>
					            <li><img name="A4" size="220*315" src="http://m.yiigoo.com/images/useless/shouye/in_D4.jpg" hegiht="157px" width="100%"></li>
					            <li><img name="A5" size="220*315" src="http://m.yiigoo.com/images/useless/shouye/in_D5.jpg" hegiht="157px" width="100%"></li>
					            <li><img name="A6" size="220*315" src="http://m.yiigoo.com/images/useless/shouye/in_D6.jpg?v=1" hegiht="157px" width="100%"></li>
					            <li><img name="A7" size="220*315" src="http://m.yiigoo.com/images/useless/shouye/in_D7.jpg" hegiht="157px" width="100%"></li>
					            <li><img name="A8" size="220*315" src="http://m.yiigoo.com/images/useless/shouye/in_D8.jpg" hegiht="157px" width="100%"></li>
					            <li><img name="A9" size="220*315" src="http://m.yiigoo.com/images/useless/shouye/in_D8.jpg" hegiht="157px" width="100%"></li>
					          </ul>
					        
					     
						   </div>	
						</div>	
						
				  </div>

			       </div>
               </div>
			</div>
		</div>
	</section>

</body>
	<script src="../../js/jquery/jquery-2.0.3.min.js"></script>
<!-- JQUERY UI-->
		<script src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
		<!-- BOOTSTRAP -->
		<script src="../../bootstrap-dist/js/bootstrap.min.js"></script>
		<!-- SLIMSCROLL -->
	<script type="text/javascript" src="../../js/jQuery-slimScroll-1.3.0/jquery.slimscroll.min.js"></script>
	<script type="text/javascript" src="../../js/jQuery-slimScroll-1.3.0/slimScrollHorizontal.min.js"></script>
		<!-- BLOCK UI -->
		<script type="text/javascript" src="../../js/jQuery-BlockUI/jquery.blockUI.min.js"></script>
		<!--bootbox-->
		<script type="text/javascript" src="../../js/bootbox/bootbox.min.js"></script>
		<!-- AUTOSIZE -->
		<script type="text/javascript" src="../../js/autosize/jquery.autosize.min.js"></script>
		<!-- spinner -->
		<script src="../../js/spinner/spin.js"></script>
		<!-- bootstrap-fileupload -->
		<script type="text/javascript" src="../../js/jquery-upload/js/jquery.iframe-transport.js"></script>
		<script type="text/javascript" src="../../js/jquery-upload/js/jquery.fileupload.min.js"></script>
		<script type="text/javascript" src="../../js/jquery-upload/js/jquery.fileupload-process.min.js"></script>
		<script type="text/javascript" src="../../js/jquery-upload/js/jquery.fileupload-validate.min.js"></script>

		<!-- INPUT MASK -->
		<script type="text/javascript" src="../../js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>

		<!-- SELECT2 -->
		<script type="text/javascript" src="../../js/select2/select2.min.js"></script>
		<!-- UNIFORM -->
		<script type="text/javascript" src="../../js/uniform/jquery.uniform.min.js"></script>
		<!-- WIZARD -->
		<script src="../../js/bootstrap-wizard/jquery.bootstrap.wizard.min.js"></script>
		<!-- WIZARD -->
		<script src="../../js/jquery-validate/jquery.validate.min.js"></script>
		<script src="../../js/jquery-validate/additional-methods.min.js"></script>
		<script src="../../js/bootstrap-wizard/form-wizard.js"></script>
		<!-- NESTABLE LISTS -->
		<script type="text/javascript" src="../../js/nestable/jquery.nestable.min.js"></script>
		<!-- COOKIE -->
		<script type="text/javascript" src="../../js/jQuery-Cookie/jquery.cookie.min.js"></script>
		<!-- CUSTOM SCRIPT -->
		<script src="../../js/script.js"></script>
		<script src="../../js/common.js"></script>
		<script src="../../js/Sortable.min.js"></script>
		<script>
			var Home = function() {
				var target=null;
				var img={};
				img.imgType="Category";
				var upLoadImg=function(){	
					
					$("[upload-file=imageUrlProduct]").fileupload({
						url: App.getContextPath()+"admin/file/uploadFile.do",
						formData: {fileType: img.imgType},
						dataType: 'json',
						acceptFileTypes: /(\.|\/)(gif|jpe?g|png|JPG?g)$/i,
						iframe: true,
					    start:function(e) {		    	
					    	$('.progress').fadeIn(300);					    	
					    	return true;
				    		},
						autoUpload: true,
						done: function(e, data) {						
							var result = data.result;											
					    	var $tr = $(this).closest("form");					    	
					    	$tr.find("[hidden-image]").append("<input type='hidden' name='imagePath' value='" + result.fileUrl+"' />");
					    	$tr.find(".image_preview_default").html("<img src='"+result.fileUrl+"' />");
					    	img.imgPath=result.fileUrl;
							
						},						
					    progressall: function (e, data) {					    	
				            var progress = parseInt(data.loaded / data.total * 100, 10);
				            $('.progress .progress-bar').css('width',progress + '%');
				        }
					}).on('fileuploaddone',function(e,data) {
							$(".progress").fadeOut(300);
					
					});
				}
				
				var loadImg=function(){
					$.ajax({
						type: "post",
						url: App.getContextPath()+"admin/template/searchImageList.do",
						async: true,
						data: {type:img.imgType},
						success: function(result) {
							if(result!=null){
								$.each(result,function(index,item){
									$("[name='"+item.name+"']").attr("src",item.imgPath).attr("id",item.id).attr("linkUrl",item.linkUrl);
								})
							}
						 
						}
					});
					
				}
				var saveImg=function(){
					img.linkUrl=$("[name=linkUrl]").val();							
					if(img.imgPath==""){
						$.alert("请上传一张图片")
						return false;
					}
					if(img.linkUrl==""){
						$.alert("请输入图片的链接")
						return false;
					}
					$.blockUI();
					$.ajax({
						type: "post",
						url: App.getContextPath()+"admin/template/saveImg.do",
						async: true,
						data: $.param({img:JSON.stringify(img)}),
						success: function(result) {
							 $.unblockUI();
							if(result.type=="success"){
								target.attr("src",img.imgPath);
								target.attr("linkUrl",img.linkUrl);
							  $("#box-config").modal("hide");
							  
							}
							
						 
						}
					});
				}
				
				return {
					init:function(){
						//加载图片
						loadImg();						
						//图片点击
						$("img").click(function(){
							target=$(this);
							img.imgPath=target.attr("src");
							var size=target.attr("size");							
							img.name=target.attr("name");
							img.linkUrl=target.attr("linkUrl");	
							img.id=target.attr("id");
							
							img.areaName=target.closest(".row").attr("name")
							
							$(".imgName").html(img.name);
							$(".imgSize").html(size);
							$("[name='imagePath']").val(img.imgPath);
							$(".image_preview_default").empty().append("<img src='"+img.imgPath+"'/>");
					    	$("[name=linkUrl]").val(img.linkUrl);
					    	$(".progress").hide();
							upLoadImg();
							$(".bt-save").unbind("click").click(saveImg);
							$("#box-config").modal("show");
						});
					}
				}
			}();
			$(function() {
			    $("#header").load("../head.html");
			    App.init();
			    Home.init();
			});
			
			</script>
			

</html>